<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>关注成长</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/element-ui-index.css"/>
    <script type="text/javascript" src="js/element-ui-index.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 100%;">
<template style="width: 100%;">
    <div style="padding: 20px;color: rgb(0 0 0);text-decoration: none;font-size: smaller;">
        <el-button style="color:#3a8ee6;" icon="el-icon-back" circle size="mini" onclick="window.location.href='./list.html'"></el-button>
    </div>
    
    <div style="text-align: center;font-size: medium;color: #000000;padding: 24px 0px 12px 0px;font-weight: 600;">
        {{resp.title}}
    </div>
    <div style="text-align: center;font-size: x-small;color: #000000;">
        已登记 {{resp.member_count}} 人
    </div>

    <div style="margin:16px;display: flow-root;">
        <el-radio-group v-model="category" size="small" @change="categoryChange">
            <el-radio-button
              v-for="item in resp.categorys"
              :key="item.cid"
              :value="item.cid"
              :label="item.cid"
            >{{item.name}}</el-radio-button>
        </el-radio-group>
    </div>

    <template v-if="category==0">
        <div style="margin:16px;text-align: center;padding: 8px 0px;font-weight: 600;background-color: aliceblue;">{{category_name}}</div>
        <ul style="width: 92%;font-size: small;margin: auto;text-align: center;display: flex; flex-flow: wrap;">
            <li v-for="(item,index) in resp.results[0].stat" style="width:25%">
                <div style="line-height: 28px;font-weight: 600;">
                    <span>{{resp.categorys[item.cid].name}}</span>
                </div>
                <div style="line-height: 20px;">
                    <span style="color: #3a8ee6;font-weight: 600;font-size: medium;">{{item.result}}</span> / 
                    <span style="font-size: smaller;color: gray;">{{item.full_result}}</span>
                </div>
            </li>
        </ul>

        <div style="margin:16px;text-align: center;padding-top: 1px;"></div>

        <table style="width: 92%;font-size: small;margin: auto;text-align: center;">
            <tr style="height: 32px;line-height: 32px;background-color: aliceblue;font-size: x-small;font-weight: 600;">
                <th></th>
                <th>我的成绩</th>
                <th>平均分</th>
                <th>最高分</th>
            </tr>
            <template  v-for="(item,index) in resp.results[0].sum_details">
                <tr style="height: 42px;line-height: 42px;border-bottom: 1px solid #f3f3f3;">
                    <td>
                        <span v-if="item.cid==0">全科</span>
                        <span v-else>{{resp.categorys[item.cid].name}}</span> 
                    </td>
                    <td>
                        <div style="line-height: 20px;font-weight: 600;color: #3a8ee6;font-size: medium;">
                            <span v-if="item.result>item.average_result" style="color:red">{{item.result}}</span>
                            <span v-if="item.result<item.average_result" style="color:green">{{item.result}}</span>
                        </div>
                        <div style="line-height: 20px;font-size: smaller;color: gray;">第 <span>{{item.rank}}</span> 名</div>
                    </td>
                    <td>{{item.average_result}}</td>
                    <th>{{item.max_result}}</th>
                </tr>
            </template>
        </table>

        <div style="margin:16px;text-align: center;padding-top: 1px;"></div>

        <table style="width: 92%;font-size: small;margin: auto;text-align: center;">
            <tr style="height: 32px;line-height: 32px;background-color: aliceblue;font-size: x-small;font-weight: 600;">
                <th></th>
                <th>名次</th>
                <th>分数</th>
            </tr>
            <tr v-for="(detail,index) in resp.results[0].details" :style="{background:(detail.me!=0?'gold':'')}"  style="height: 32px;line-height: 32px;border-bottom: 1px solid #f3f3f3;">
                <td></td>
                <td>{{detail.idx}}</td>
                <td>{{detail.result}}</td>
            </tr>
        </table>

        <div style="margin:16px;text-align: center;padding-top: 1px;"></div>
    </template>

    <template v-else>
        <div style="margin:16px;text-align: center;padding: 8px 0px;font-weight: 600;background-color: aliceblue;">{{category_name}}</div>
        <template v-for="(item,index) in resp.results">
            <template v-if="category==item.category">
                <table  border="0" style="width: 92%;font-size: small;margin: auto;text-align: center;">
                    <tr style="height: 64px;line-height: 64px;">
                        <td>
                            <div style="line-height: 28px;font-weight: 600;">我的成绩</div>
                            <div style="line-height: 28px;font-weight: 600;color: #3a8ee6;font-size: medium;">
                                <span v-if="item.stat.result>item.stat.average_result" style="color:red">{{item.stat.result}}</span>
                                <span v-if="item.stat.result<item.stat.average_result" style="color:green">{{item.stat.result}}</span>
                            </div>
                            <div style="line-height: 20px;font-size: smaller;color: gray;">第 <span>{{item.stat.rank}}</span> 名</div>
                        </td>
                        <td>
                            <div style="line-height: 28px;font-weight: 600;">平均分</div>
                            <div style="line-height: 28px;font-weight: 600;color: #3a8ee6;font-size: medium;">{{item.stat.average_result}}</div>
                        </td>
                        <td>
                            <div style="line-height: 28px;font-weight: 600;">最高分</div>
                            <div style="line-height: 28px;font-weight: 600;color: #3a8ee6;font-size: medium;">{{item.stat.max_result}}</div>
                        </td>
                    </tr>
                </table>
                <div style="margin:16px;text-align: center;padding-top: 1px;"></div>

                <table style="width: 92%;font-size: small;margin: auto;text-align: center;">
                    <tr style="height: 32px;line-height: 32px;background-color: aliceblue;font-size: x-small;font-weight: 600;">
                        <th></th>
                        <th>名次</th>
                        <th>分数</th>
                    </tr>
                    <tr v-for="(detail,index) in item.details" :style="{background:(detail.me!=0?'gold':'')}"  style="height: 32px;line-height: 32px;border-bottom: 1px solid #f3f3f3;">
                        <td></td>
                        <td>{{detail.idx}}</td>
                        <td>{{detail.result}}</td>
                    </tr>
                </table>
            </template>
        </template>
        <div style="margin:16px;text-align: center;padding-top: 1px;"></div>
    </template>

</template>
</div>
</body>

<script type="text/javascript">
new Vue({
    el: '#app',
    data() {
        return {
            token: "",
            exam_id: 0,
            loading: false,
            category: 0,
            category_name: "总分",

            resp: {
                title: "-------",
                member_count: 0,
                categorys: [ { cid:0, name:"总分" } ],
                results: [
                    {
                        category:0,
                        stat: [ { cid:0, result:0, full_result:0 } ],
                        sum_details: [ { idx:0,cid:0,result:0,rank:0,average_result:0,max_result: 0 } ],
                        details: [ { idx:0,result:0,me:0 } ]
                    }
                ]
            }
        }
    },
    created() {
        this.token = sessionStorage.getItem("token");
        this.exam_id = sessionStorage.getItem("exam_id");
        if (!this.token || !this.exam_id) {
            top.location.href = "login.html";
            return;
        }
    },
    mounted() {
        this.getDetail();
    },
    methods: {
        categoryChange(val) {
            for (var idx in this.resp.categorys) {
                let item = this.resp.categorys[idx];
                if (item.cid == val) {
                    this.category_name = item.name;
                }
            }
        },
        async getDetail() {
            var params = {};
            params.token = this.token;
            params.exam_id = this.exam_id;
            this.loading = true;
            //查询详情
            let _this = this;
            axios.post("/api/examinationDetail", params)
                .then(function (res) {
                if (res.data.rcode == 0) {
                    _this.loading = false;
                    _this.resp = res.data.body;
                    return;
                } else {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                }
                })
                .catch(function (error) {
                    _this.loading = false;
                    return _this.$message.error("系统异常");
                });
        }
    }
})
</script>

</html>
